<template>
	<div class="top-container">
		<div class="left">眼动检测分析系统</div>
		<div class="right">
			<img src="@/assets/img/avator.png" />
			<span>您好，{{ userName }}</span>
			<span>
				<el-dropdown>
					<span class="el-dropdown-link">
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>
								<span @click="changePassword">修改密码</span>
							</el-dropdown-item>
							<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</span>
			<ChangePsd :showDialog="showDialog" v-model="showDialog" @cancle="cancle" @confirm="confirm">
			</ChangePsd>
			<!-- 退出登录 -->
			<Logout v-model="logoutDialogVisible" :logoutDialogVisible="logoutDialogVisible" @cancle="logoutCancle" @confirm="logoutOK"></Logout>
		</div>
	</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'
import ChangePsd from './changePsd.vue';
import Logout from './logout.vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const router = useRouter();
const showDialog = ref(false);
const logoutDialogVisible = ref(false);

// 请求数据获取用户名
const userName = ref('');
onMounted(() => {
	userName.value = store.state.username;
})
// 点击修改密码
const changePassword = () => {
	showDialog.value = true;
}
// 确定
const confirm = (value: any) => {
	cancle(value);
}
// 取消
const cancle = (value: any) => {
	showDialog.value = value;
}
// 退出登录
const logout = () => {
	logoutDialogVisible.value = true;
}
// 确定退出系统
const logoutOK = () => {
	logoutDialogVisible.value = false;
	window.sessionStorage.clear();
	store.commit('updateUserName', '');
	router.push({ path: '/login' });
}
// 取消退出
const logoutCancle = () => {
	logoutDialogVisible.value = false;
}
</script>

<style lang="scss" scoped>
.top-container {
	display: flex;
	padding-top: 30px;
	/* align-items: center; */
	justify-content: space-between;
	padding-right: 20px;

	.left {
		font-size: 24px;
		padding-left: 20px;
	}

	.right {
		img {
			width: 40px;
			height: 40px;
			vertical-align: middle;
		}

		span {
			display: inline-block;
			margin-left: 10px;
		}
	}
}
</style>